<template>
    <div id="header">
        <div>
            <div class="header_logo_box">
                  <a href="/"> <img src="/static/img/logo (2).png" alt="" srcset=""></a>
            </div>
            <div>
                <div v-for="item in nav" :key="item.path">
                    <span @click="jump(item.path)" :class="(computendIndex(item.path)) && 'active' "> {{item.name}}</span>
                </div>
                
                 <div @click="$store.commit('jumpURL', '登陆/注册')">
                    登陆/注册
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Header",
    data() {
        return {
            nav: [
                {
                    path: '/index.html',
                    name: '首页'
                },
                // {
                //     path: '/product.html',
                //     name: '产品'
                // },
                // {
                //     path: '/solution.html',
                //     name: '解决方案'
                // },
                {
                    path: '/about.html',
                    name: '关于我们'
                },
            ],
        }
    },
    methods: {
      
        jump ( path) {
          
            
            
            var href = location.href
              location.href =  href.substr(0, href.lastIndexOf('/'))+path

        },
        computendIndex (path) {
            let nowPath = this.$route.fullPath
            if(nowPath == '/') nowPath = '/index.html'
            return  (nowPath.indexOf(path)+1)
        }
    },
    computed: {
        
       
    },
}
</script>
<style lang="less">
     @import url('../../main.less');
     
     #header{
         width: 100%;
         float: left;
        //  position: relative;
         display: flex;
         justify-content: center;
         
         .header_logo_box{
                width: 1.8rem;
                height: 0.48rem;
             img{
                 width: 100%;
                 height: 100%;
                  display: block;
                  cursor: pointer;
             }
             
         }
         >div{
             height: 0.9rem;
             line-height: 0.9rem;
             font-size: 0.21rem;
             color: #fff;
            position: absolute;
            z-index: 1000;
            width: @w;
            display: flex;
            justify-content: space-between;
                align-items: center;
            >div:nth-child(2){
                >div{ 
                    float: left;
                    margin-left: 0.75rem;
                   
                    // transition: color 1s;
                }
                div:hover{
                    color: #3AF3FE;
                }
                
            }
            .active{
                     color: #3AF3FE!important;
                }

         }
     }
</style>